<template>
	<fui-nav-bar title="首页"></fui-nav-bar>
	<fui-search-bar background="#f6f6f6" radius="36" searchColor="#FFB703" @search="search" @input="inputSearch"></fui-search-bar>
	<!-- <fui-swiper-dot :items="state.items" :current="current" :show-dots="false"> -->
	<swiper class="fui-banner__wrap swi_img" @change="changeSwiper" circular :indicator-dots="false" autoplay :interval="2000" :duration="500">
		<swiper-item v-for="(item, index) in state.items" :key="index">
			<view class="fui-banner__item">
				<image :src="item.pic" mode=""></image>
				<!-- <fui-lazyload :src="item.pic"></fui-lazyload> -->
			</view>
		</swiper-item>
	</swiper>
	<!-- </fui-swiper-dot> -->
	<fui-row margin-bottom="24rpx">
		<fui-col :span="6" v-for="(item, index) in menuList" :key="index">
			<view class="fui-col__item fui-color__black item" @click="handleItem(item)">
				<image :src="item.icon" style="width: 40rpx; height: 40rpx" mode=""></image>
				<view style="font-size: 20rpx">{{ item.text }}</view>
			</view>
		</fui-col>
	</fui-row>

	<fui-tabs :tabs="tabs" @change="changeTabs" size="20"></fui-tabs>
	<!-- 推荐搭子列表 -->
	<view class="recommend-partner-list-box" v-show="state.activeTab.index == 0">
		<template v-for="(item, i) of recPartnerList" :key="item.id">
			<view class="item" @click="goToPartnerDetail(item.id, i)">
				<image :class="{ img: true, 'img-blur': !isVip && i !== 0 }" src="../../static/1.jpg"></image>
				<view class="status">2小时前在线</view>
				<view class="name">{{ item.userName }}</view>
			</view>
		</template>
	</view>
	<!-- <fui-list v-show="state.activeTab.index == 0">
		<fui-list-cell v-for="(item, index) of 4" :key="index" :highlight="false" class="dazCard" @click="goToDazDetail">
			<image src="../../static/1.jpg" mode=""></image>
			<view class="info"> -->
	<!-- <view>附近2km</view>
				<view class="online-time">2小时前在线</view>
				<view class="mask">张梦曦</view> -->
	<!-- 	<fui-tag marginLeft="20" marginBottom="20" background="gray" size="20" text="张梦曦" color="white"></fui-tag>
	<fui-tag marginLeft="20" marginBottom="20" background="gray" size="20" text="24岁" color="white"></fui-tag>
	<fui-tag marginLeft="20" marginBottom="20" background="gray" size="20" text="附近2km" color="white"></fui-tag>
	<fui-tag marginLeft="20" marginBottom="20" background="gray" size="20" text="2小时前在线" color="white"></fui-tag> -->
	<!-- <view style="margin: 10rpx 0rpx">
						<text style="font-weight: bold">搭子简介：</text>
						<text>
							本人诚实，热情，具有良好的人际关系，极富创造力与创新意识，具有较强的逻辑思维和组织协调能力，对事情认真，负责，有很强的责任心和团队精神，为人自信，乐观，处事冷静，服从领导安排，吃苦耐劳等。
						</text>
					</view> -->
	<!-- 	</view>
		</fui-list-cell>
	</fui-list> -->
	<fui-list v-show="state.activeTab.index == 1">
		<fui-list-cell v-for="shop of tableList_1km" :key="shop.uid" :highlight="false" class="deskCard" :padding="['20rpx', '20rpx']">
			<view class="info">
				<view class="title">
					<text>{{ shop.name }}</text>
				</view>
				<view class="rate">
					<fui-rate :size="32" max="5" :score="4"></fui-rate>
				</view>
				<view class="address">
					<text>{{ shop.address }}</text>
				</view>
				<view class="large">
					<view class="navigation">导航</view>
					<view class="phone">电话</view>
				</view>
			</view>
			<fui-empty v-show="tableList_1km.length == 0" src="./static/empty.png" title="暂无数据" width="200" height="200" isFixed></fui-empty>
		</fui-list-cell>
	</fui-list>
	<!--   -->
	<view class="shopModel" v-show="state.activeTab.index == 2">
		<scroll-view style="width: 100%; height: 650rpx" :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
			<view class="card" v-for="(item, index) in shopModel" :key="index" @click="goToDetails(item)">
				<image :src="item.img" mode=""></image>
				<text style="font-size: 36rpx; font-weight: bold; color: red">￥{{ item.price }}</text>
				<view class="title">
					<text>{{ item.title }}</text>
				</view>
			</view>
		</scroll-view>
	</view>
	<!-- <view style="width: 100%; height: 150rpx"></view> -->
</template>

<script setup>
import { reactive, watch, ref, onMounted } from 'vue';
import tabbar from '@/components/tabbar/tabbar.vue';
import { onLoad } from '@dcloudio/uni-app';
import { useCounterStore } from '@/store/equipment/index.js';
import { storeToRefs } from 'pinia'; // 数据响应式方法
import { findShop, findEquipment, getRecomendPartnerData } from '@/request/modules/home.js';
import { onShow } from '@dcloudio/uni-app';
import { getDeskList } from '../../request/modules/desk';
import { showMsg } from '../../utils/interact';
import useChatStore from '../../store/chat';
const menuList = [
	{
		path: '/pages_mine/equip',
		icon: '/static/equip.png',
		text: '我的装备'
	},
	{
		path: '/pages_mine/daz',
		icon: '/static/daz.png',
		text: '我的搭子'
	},
	{
		path: '/pages_mine/desk',
		icon: '/static/zz.png',
		text: '我的桌子'
	},
	{
		path: '/pages_mine/record',
		icon: '/static/record.png',
		text: '历史战绩'
	}
];
const tabs = [
	{
		name: '推荐搭子'
	},
	{
		name: '热门桌子'
	},
	{
		name: '热销装备'
	}
];

const shopModel = ref([
	{
		name: '台球杆四分之三杆中式八球杆白蜡木斯诺克小头杆黑八中头桌球球杆',
		price: '78',
		img: '/static/qg.jpg',
		path: '/pages_home/equipDetails'
	}
]);
// 响应式变量
const tableList_1km = ref([]);

const state = reactive({
	scrollTop: 0,
	searchValue: '',
	current: 0,
	activeTab: {
		index: 0,
		name: '推荐搭子'
	},
	items: [
		{
			pic: 'https://img.zcool.cn/community/0121e65c3d83bda8012090dbb6566c.jpg@3000w_1l_0o_100sh.jpg'
		},
		{
			pic: 'https://img.zcool.cn/community/0121e65c3d83bda8012090dbb6566c.jpg@3000w_1l_0o_100sh.jpg'
		},
		{
			pic: 'https://img.zcool.cn/community/0121e65c3d83bda8012090dbb6566c.jpg@3000w_1l_0o_100sh.jpg'
		}
	]
});
let pages = 1;
let total = 0;
let longitude = 0;
let latitude = 0;
let isVip = false;
// 仓库对象
const store = useCounterStore();
const chatStore = useChatStore();
const recPartnerList = ref([]);
let getRecommendPartnerList = null;
const search = (e) => {
	console.log('搜索2', state.searchValue);
};
const changeSwiper = (e) => {
	state.current = e.detail.current;
};
const changeTabs = (e) => {
	if (e.index == 1) {
		//点击热门桌子
		uni.getLocation({
			type: 'wgs84', // 返回可以用于uni.openLocation的经纬度
			geocode: true,
			success: function (res) {
				latitude = res.latitude;
				longitude = res.longitude;
				getNearDeskList(latitude, longitude);
			},
			fail: function (e) {
				console.error('获取位置信息失败：' + JSON.stringify(e));
				showMsg('获取定位失败');
			}
		});
	}
	state.activeTab = e;
};

// 事件监听
//搭子详情
function goToPartnerDetail(id, index) {
	if (index === 0) {
		uni.navigateTo({
			url: `/pages_daz/dazDetails?id=${id}`
		});
	} else {
		if (isVip) {
			uni.navigateTo({
				url: `/pages_daz/dazDetails?id=${id}`
			});
		} else {
			//不是会员，去充值页面
			uni.navigateTo({
				url: '/pages_home/take-money',
				fail(err) {
					console.log(err);
				}
			});
		}
	}
}
//请求接口
//请求附近桌子信息
async function getNearDeskList(latitude, longitude) {
	const res = await getDeskList({
		latitudeAndLongitude: latitude + ',' + longitude,
		radius: '1000'
	});
	if (res.statusCode !== 200) return showMsg('获取失败');
	tableList_1km.value = res.data.results;
}

//请求推荐搭子列表
const getRecomendPartnerFunc = async () => {
	const res = await getRecommendPartnerList({ pages, pageSize: 9 });
	recPartnerList.value = res.list;
	total = res.total;
};

//点击搜索
const handleSearch = () => {
	if (state.searchValue) {
		uni.navigateTo({
			url: '/pages_home/search'
		});
	}
};
const inputSearch = (event) => {
	console.log(event);
	state.searchValue = event;
};
const handleItem = (item) => {
	getEquipment();
	uni.navigateTo({
		url: item.path
	});
	console.log(item);
};
const goToDetails = (item) => {
	store.equipDetail(item);
	uni.navigateTo({
		url: '/pages_home/equipDetails'
	});
};
const goToDazDetail = () => {
	uni.navigateTo({
		url: '/pages_daz/dazDetails'
	});
};
watch(
	() => state.activeTab,
	(vld, old) => {
		if (vld !== old) {
			if (vld.index === 2) {
				getFindShop();
			}
		}
	}
);
//点击热销产品
const getFindShop = async () => {
	const res = await findShop(1, 10);
	shopModel.value = res.list || [];
};

//测试
const getEquipment = async () => {
	const res = await findEquipment(1, 10, 4);
	const jsonData = JSON.stringify(res.list);
	uni.setStorageSync('Equipment', jsonData);
};
// 页面加载
onLoad(() => {
	getRecommendPartnerList = getRecomendPartnerData();
	getRecomendPartnerFunc();

	chatStore.getIsOnline();
});
// 组件挂载完毕
onMounted(() => {});
</script>

<style scoped lang="scss">
.fui-banner__item {
	width: 100%;
	height: 100%;
	padding: 0 30rpx;
	box-sizing: border-box;
	image {
		width: 100%;
		height: 100%;
		border-radius: 30rpx;
	}
}
.swi_img {
	margin: 20rpx 0;
}
.fui-banner__wrap {
	height: 320rpx;
}
.item {
	width: 100%;
	height: 100%;
	margin-top: 30rpx;
	image {
		display: block;
		margin: auto;
	}
	view {
		text-align: center;
		font-size: 30rpx;
		margin-top: 10rpx;
	}
}
.dazCard {
	display: flex;
	image {
		width: 200rpx;
		height: 250rpx;
	}
	.info {
		width: calc(100% - 200rpx);
		height: 250rpx;
		padding: 10rpx 20rpx 10rpx 20rpx;
		box-sizing: border-box;
		font-size: 20rpx;
	}
}
.deskCard {
	font-size: 24rpx;
	.info {
		width: 100%;

		.title {
			font-size: 32rpx;
			text {
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		.rate {
			margin: 10rpx 0rpx;
		}
		.address {
			font-size: 24rpx;
			color: $uni-text-color-address;
		}
		.large {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 10rpx;
			padding: 0rpx 20%;
			box-sizing: border-box;
			.navigation .phone {
				width: 300rpx;
				height: 60rpx;
			}
		}
	}
}
.recordCard {
	font-size: 24rpx;
}
.shopModel {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0rpx 2%;
	box-sizing: border-box;
	margin-top: 20rpx;
	.card {
		width: 46%;
		background-color: #f6f6f6;
		margin-left: 3%;
		margin-bottom: 20rpx;
		padding: 10rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		border-radius: 10rpx;
		box-shadow: 0 0 2rpx rgba(0, 0, 0, 0.2);
		float: left;
		image {
			width: 100%;
			height: 300rpx;
		}
		.title {
			text {
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		.price {
			text {
				color: red;
			}
		}
	}
}

// 推荐搭子列表
.recommend-partner-list-box {
	padding: 10px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 10px;
	.item {
		height: 320rpx;
		position: relative;
		overflow: hidden;
		border-radius: 14px;

		.img {
			width: 100%;
			height: 100%;
			border-radius: 14px;
			&-blur {
				filter: blur(5px);
			}
		}
		.status {
			width: fit-content;
			padding: 4px;
			color: $uni-text-color-inverse;
			font-size: $uni-font-size-sm;
			position: absolute;
			top: -3.5%;
			left: 0%;
			border-radius: 14px 0 0 0;
		}
		.name {
			width: 100%;
			position: absolute;
			left: 0%;
			bottom: 0%;
			color: $uni-text-color-inverse;
			font-size: 0.8rem;
			line-height: 56rpx;
			text-align: center;
			border-radius: 0 0 14px 14px;
		}
	}
}
</style>
